Floating label settings
Description
Defines the appearance and behavior of floating control labels.
Discussion
A floating label is a dynamic label displayed as either a watermark or text above the control. The watermark is used when the control has no value (such as a blank text box.) When the user interacts with the control, or the control has a value, the label is placed above the control, i.e. the floating position. Animations are also used to transition from the watermark to the floating position.
Edit controls (text boxes, text areas, and dropdowns) in a UX component support floating labels.
Configuring Floating Label Settings
The Floating Label Settings affect the behavior of all floating labels in a component. These settings include:
- Padding on left when label is in floated position
- Padding on right when label is in floated position
- Margin above label when label is in floated position
- The label's location relative to the control
- The label's font size when label is in floated position
In the image below, the insideControl option has been selected. Also note that the edit control sub-theme has been set to a custom sub-theme based on the Primary sub-theme (which puts a border around the control). The custom sub-theme has set the border-radius to 10px.
To define settings, click the smart field for Floating label settings
- Property
- Description
- Indent - left
The distance between the left edge of the control and the label. The left indentation is specified using CSS units. E.g. 4px, 0.5in.
- Indent - right
The distance between the right edge of the control and the label. Right indentation only applies if the [Alignment] property for the control's label is set to Right. The right indentation is specified using CSS units. E.g. 4px, 0.5in.
- Margin - above
The distance between the label when positioned above the control and the control, container, or object located above the label. The above margin is specified using CSS units. E.g. 4px, 0.5in. Defaults to 20px.
- Floated label location
The location where the label will be positioned relative to the control. Can be one of the following locations:
- Location
- Description
- aboveControl
Label is positioned outside of the control.
- insideControl
Label is positioned inside the control.
- Floated label font size
The label's font size when floated above the control. The font size is specified using CSS units. E.g. 20px, 12pt. Defaults to 10px.
Videos
Floating Textbox Labels
A popular design pattern displays the label for a textbox as a watermark in the field. When the user clicks in the field to begin typing, the watermark animates into position above the textbox.
In this video, we show how animated textbox labels can be specified.
See Also